const dragGraph = function({
	x,
	y,
	w,
	h,
	type,
	text,
	fontSize = 20,
	color = 'red',
	url
}, canvas, factor) {
	if (type === 'text') {
		canvas.setFontSize(fontSize);
		const textWidth = canvas.measureText(this.text).width;
		const textHeight = fontSize + 10;
		const halfWidth = textWidth / 2;
		const halfHeight = textHeight / 2;
		this.x = x + halfWidth;
		this.y = y + halfHeight;
	} else {
		this.x = x;
		this.y = y;
	}
	this.w = w;
	this.h = h;
	this.fileUrl = url;
	this.text = text;
	this.fontSize = fontSize;
	this.color = color;
	this.ctx = canvas;
	this.rotate = 0;
	this.type = type;
	this.selected = true;
	this.factor = factor;
	this.MIN_WIDTH = 50;
	this.MIN_FONTSIZE = 10;
}

dragGraph.prototype = {
	/**
	 * 绘制元素
	 */
	paint() {
		if (this.type === 'image') {
			this.ctx.save(); //保存当前上下文
			// this.ctx.globalCompositeOperation='source-over';

			// 由于measureText获取文字宽度依赖于样式，所以如果是文字元素需要先设置样式
			if (this.type === 'text') {
				this.ctx.setFontSize(this.fontSize);
				this.ctx.setTextBaseline('middle');
				this.ctx.setTextAlign('center');
				this.ctx.setFillStyle(this.color);
			}
			// 选择区域的中心点
			this.centerX = this.type === 'text' ? this.x : this.x + (this.w / 2);
			this.centerY = this.type === 'text' ? this.y : this.y + (this.h / 2);
			// 旋转元素
			this.ctx.translate(this.centerX, this.centerY);
			this.ctx.rotate(this.rotate * Math.PI / 180);
			this.ctx.translate(-this.centerX, -this.centerY);

			// 如果是选中状态，绘制选择虚线框，和缩放图标、删除图标
			// this.ctx.globalCompositeOperation='source-over';
			if (this.selected) {
				this.ctx.setLineDash([10, 10]);
				this.ctx.setLineWidth(2);
				this.ctx.setStrokeStyle('red');
				this.ctx.lineDashOffset = 10;

				if (this.type === 'text') {
					const textWidth = this.ctx.measureText(this.text).width;
					const textHeight = this.fontSize + 10
					const halfWidth = textWidth / 2;
					const halfHeight = textHeight / 2;
					const textX = this.x - halfWidth;
					const textY = this.y - halfHeight;
					this.ctx.strokeRect(textX, textY, textWidth, textHeight);
					this.ctx.drawImage('../../static/images/close.png', textX - 15, textY - 15, 30, 30);
					this.ctx.drawImage('../../static/images/scale.png', textX + textWidth - 15, textY + textHeight -
						15,
						30, 30);
				} else {
					this.ctx.strokeRect(this.x, this.y, this.w, this.h);
					this.ctx.drawImage('../../static/images/close.png', this.x - 20, this.y - 20, 30, 30);
					this.ctx.drawImage('../../static/images/scale.png', this.x + this.w - 10, this.y + this.h - 10,
						30,
						30);
				}
			}

			this.ctx.restore();


			this.ctx.save();
			// TODO 剪切
			this._drawRadiusRect(150, 140, 450, 600, 100);
			this.ctx.setLineDash([5, 5]);
			this.ctx.setLineWidth(1);
			this.ctx.setStrokeStyle('gray');
			if (this.selected) {
				this.ctx.stroke()
			}
			this.ctx.clip();

			// 旋转元素
			this.ctx.translate(this.centerX, this.centerY);
			this.ctx.rotate(this.rotate * Math.PI / 180);
			this.ctx.translate(-this.centerX, -this.centerY);

			// this.ctx.globalCompositeOperation='lighter';
			// 渲染元素
			if (this.type === 'text') {
				this.ctx.fillText(this.text, this.x, this.y);
			} else if (this.type === 'image') {
				this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);
			}
			this.ctx.restore(); //有保存sava才会有回复restore
		}
		if (this.type === 'text') {


			this.ctx.save(); //保存当前上下文
			// 由于measureText获取文字宽度依赖于样式，所以如果是文字元素需要先设置样式
			if (this.type === 'text') {
				
				this.ctx.setFontSize(this.fontSize);
				
				this.ctx.setTextBaseline('middle');
				this.ctx.setTextAlign('center');
				this.ctx.setFillStyle(this.color);
			}
			// 选择区域的中心点
			this.centerX = this.type === 'text' ? this.x : this.x + (this.w / 2);
			this.centerY = this.type === 'text' ? this.y : this.y + (this.h / 2);
			// 旋转元素
			this.ctx.translate(this.centerX, this.centerY);
			this.ctx.rotate(this.rotate * Math.PI / 180);
			this.ctx.translate(-this.centerX, -this.centerY);

			// 如果是选中状态，绘制选择虚线框，和缩放图标、删除图标
			if (this.selected) {
				this.ctx.setLineDash([10, 10]);
				this.ctx.setLineWidth(2);
				this.ctx.setStrokeStyle('red');
				this.ctx.lineDashOffset = 10;

				if (this.type === 'text') {
					const textWidth = this.ctx.measureText(this.text).width;
					const textHeight = this.fontSize + 10
					const halfWidth = textWidth / 2;
					const halfHeight = textHeight / 2;
					const textX = this.x - halfWidth;
					const textY = this.y - halfHeight;
					this.ctx.strokeRect(textX, textY, textWidth, textHeight);
					this.ctx.drawImage('../../static/images/close.png', textX - 15, textY - 15, 30, 30);
					this.ctx.drawImage('../../static/images/scale.png', textX + textWidth - 15, textY + textHeight -
						15, 30, 30);
				} else {
					this.ctx.strokeRect(this.x, this.y, this.w, this.h);
					this.ctx.drawImage('../../static/images/close.png', this.x - 15, this.y - 15, 30, 30);
					this.ctx.drawImage('../../static/images/scale.png', this.x + this.w - 15, this.y + this.h - 15,
						30, 30);
				}
			}
			this.ctx.restore();
			
			this.ctx.save();
			// 由于measureText获取文字宽度依赖于样式，所以如果是文字元素需要先设置样式
			if (this.type === 'text') {
				// this.ctx.setFontSize(this.fontSize);
				this.ctx.setTextBaseline('middle');
				this.ctx.setTextAlign('center');
				this.ctx.setFillStyle(this.color);
			}

			
			// TODO 剪切
			this._drawRadiusRect(150, 140, 450, 600, 100);
			this.ctx.setLineDash([5, 5]);
			this.ctx.setLineWidth(1);
			this.ctx.setStrokeStyle('gray');
			if (this.selected) {
				this.ctx.stroke()
			}
			this.ctx.clip();
			// 旋转元素
			this.ctx.translate(this.centerX, this.centerY);
			this.ctx.rotate(this.rotate * Math.PI / 180);
			this.ctx.translate(-this.centerX, -this.centerY);

			// 渲染元素
			this.ctx.font = "100px 'fonttest'"
			this.ctx.setFontSize(this.fontSize);
			// console.log(this.ctx.font);
			this.ctx.fillText(this.text, this.x, this.y);
			this.ctx.restore(); //有保存sava才会有回复restore
		}


	},

	// paint() {
	// 		this.ctx.save(); //保存当前上下文
	// 		// TODO 剪切
	// 		// this._drawRadiusRect(0, 0, 700, 750, 300);
	// 		// this.ctx.clip();
	// 		// 由于measureText获取文字宽度依赖于样式，所以如果是文字元素需要先设置样式
	// 		if (this.type === 'text') {
	// 			this.ctx.setFontSize(this.fontSize);
	// 			this.ctx.setTextBaseline('middle');
	// 			this.ctx.setTextAlign('center');
	// 			this.ctx.setFillStyle(this.color);
	// 		}
	// 		// 选择区域的中心点
	// 		this.centerX = this.type === 'text' ? this.x : this.x + (this.w / 2);
	// 		this.centerY = this.type === 'text' ? this.y : this.y + (this.h / 2);
	// 		// 旋转元素
	// 		this.ctx.translate(this.centerX, this.centerY);
	// 		this.ctx.rotate(this.rotate * Math.PI / 180);
	// 		this.ctx.translate(-this.centerX, -this.centerY);
	// 		// 渲染元素
	// 		if (this.type === 'text') {
	// 			this.ctx.fillText(this.text, this.x, this.y);
	// 		} else if (this.type === 'image') {
	// 			this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);
	// 		}
	// 		// 如果是选中状态，绘制选择虚线框，和缩放图标、删除图标
	// 		if (this.selected) {
	// 			this.ctx.setLineDash([10, 10]);
	// 			this.ctx.setLineWidth(2);
	// 			this.ctx.setStrokeStyle('red');
	// 			this.ctx.lineDashOffset = 10;

	// 			if (this.type === 'text') {
	// 				const textWidth = this.ctx.measureText(this.text).width;
	// 				const textHeight = this.fontSize + 10
	// 				const halfWidth = textWidth / 2;
	// 				const halfHeight = textHeight / 2;
	// 				const textX = this.x - halfWidth;
	// 				const textY = this.y - halfHeight;
	// 				this.ctx.strokeRect(textX, textY, textWidth, textHeight);
	// 				this.ctx.drawImage('../../static/images/close.png', textX - 15, textY - 15, 30, 30);
	// 				this.ctx.drawImage('../../static/images/scale.png', textX + textWidth - 15, textY + textHeight - 15, 30, 30);
	// 			} else {
	// 				this.ctx.strokeRect(this.x, this.y, this.w, this.h);
	// 				this.ctx.drawImage('../../static/images/close.png', this.x - 15, this.y - 15, 30, 30);
	// 				this.ctx.drawImage('../../static/images/scale.png', this.x + this.w - 15, this.y + this.h - 15, 30, 30);
	// 			}
	// 		}

	// 		this.ctx.restore(); //有保存sava才会有回复restore
	// 	},




	/**
	 * 判断点击的坐标落在哪个区域
	 * @param {*} x 点击的坐标
	 * @param {*} y 点击的坐标
	 */
	isInGraph(x, y) {
		const selectW = this.type === 'text' ? this.ctx.measureText(this.text).width : this.w;
		const selectH = this.type === 'text' ? this.fontSize + 10 : this.h;

		// 删除区域左上角的坐标和区域的高度宽度
		const delW = 30;
		const delH = 30;
		const delX = this.type === 'text' ? this.x - (selectW / 2) : this.x - 5;
		const delY = this.type === 'text' ? this.y - (selectH / 2) : this.y - 5;
		// 旋转后的删除区域坐标
		const transformDelX = this._getTransform(delX, delY, this.rotate - this._getAngle(this.centerX, this
			.centerY, delX, delY)).x - (delW / 2);
		const transformDelY = this._getTransform(delX, delY, this.rotate - this._getAngle(this.centerX, this
			.centerY, delX, delY)).y - (delH / 2);

		// 变换区域左上角的坐标和区域的高度宽度
		const scaleW = 30;
		const scaleH = 30;
		const scaleX = this.type === 'text' ? this.x + (selectW / 2) : this.x + selectW + 5;
		const scaleY = this.type === 'text' ? this.y + (selectH / 2) : this.y + selectH + 5;
		// 旋转后的变换区域坐标
		const transformScaleX = this._getTransform(scaleX, scaleY, this.rotate + this._getAngle(this.centerX, this
			.centerY, scaleX, scaleY)).x - (scaleW / 2);
		const transformScaleY = this._getTransform(scaleX, scaleY, this.rotate + this._getAngle(this.centerX, this
			.centerY, scaleX, scaleY)).y - (scaleH / 2);

		const moveX = this.type === 'text' ? this.x - (selectW / 2) : this.x;
		const moveY = this.type === 'text' ? this.y - (selectH / 2) : this.y;

		// // 测试使用
		// this.ctx.setLineWidth(1);
		// this.ctx.setStrokeStyle('red');
		// this.ctx.strokeRect(transformDelX, transformDelY, delW, delH);

		// this.ctx.setLineWidth(1);
		// this.ctx.setStrokeStyle('black');
		// this.ctx.strokeRect(transformScaleX, transformScaleY, scaleW, scaleH);

		if (x - transformScaleX >= 0 && y - transformScaleY >= 0 &&
			transformScaleX + scaleW - x >= 0 && transformScaleY + scaleH - y >= 0) {
			// 缩放区域
			return 'transform';
		} else if (x - transformDelX >= 0 && y - transformDelY >= 0 &&
			transformDelX + delW - x >= 0 && transformDelY + delH - y >= 0) {
			// 删除区域
			return 'del';
		} else if (x - moveX >= 0 && y - moveY >= 0 &&
			moveX + selectW - x >= 0 && moveY + selectH - y >= 0) {
			// 移动区域
			return 'move';
		}
		// 不在选择区域里面
		return false;
	},
	/**
	 * 两点求角度
	 * @param {*} px1 
	 * @param {*} py1 
	 * @param {*} px2 
	 * @param {*} py2 
	 */
	_getAngle(px1, py1, px2, py2) {
		const x = px2 - px1;
		const y = py2 - py1;
		const hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
		//斜边长度
		const cos = x / hypotenuse;
		const radian = Math.acos(cos);
		const angle = 180 / (Math.PI / radian);
		return angle;
	},
	/**
	 * 点旋转一定角度之后的坐标
	 * @param {*} x 
	 * @param {*} y 
	 * @param {*} rotate 旋转的角度
	 */
	_getTransform(x, y, rotate) {
		const angle = (Math.PI / 180) * (rotate);
		const r = Math.sqrt(Math.pow((x - this.centerX), 2) + Math.pow((y - this.centerY), 2));
		const a = Math.sin(angle) * r;
		const b = Math.cos(angle) * r;
		return {
			x: this.centerX + b,
			y: this.centerY + a,
		};
	},
	/**
	 * 
	 * @param {*} px 手指按下去的坐标
	 * @param {*} py 手指按下去的坐标
	 * @param {*} x 手指移动到的坐标
	 * @param {*} y 手指移动到的坐标
	 * @param {*} currentGraph 当前图层的信息
	 */
	transform(px, py, x, y, currentGraph) {
		// 获取选择区域的宽度高度
		if (this.type === 'text') {
			this.ctx.setFontSize(this.fontSize);
		}

		const centerX = this.type === 'text' ? this.x : this.x + (this.w / 2);
		const centerY = this.type === 'text' ? this.y : this.y + (this.h / 2);

		const diffXBefore = px - centerX;
		const diffYBefore = py - centerY;
		const diffXAfter = x - centerX;
		const diffYAfter = y - centerY;

		const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180;
		const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180;

		// 旋转的角度
		this.rotate = currentGraph.rotate + angleAfter - angleBefore;

		const lineA = Math.sqrt(Math.pow((centerX - px), 2) + Math.pow((centerY - py), 2));
		const lineB = Math.sqrt(Math.pow((centerX - x), 2) + Math.pow((centerY - y), 2));
		if (this.type === 'image') {
			const w = currentGraph.w + (lineB - lineA);
			const h = currentGraph.h + (lineB - lineA);
			this.w = w <= this.MIN_WIDTH ? this.MIN_WIDTH : w;
			this.h = h <= this.MIN_WIDTH ? this.MIN_WIDTH : h;

			if (w > this.MIN_WIDTH && h > this.MIN_WIDTH) {
				// 放大 或 缩小
				this.x = currentGraph.x - (lineB - lineA) / 2;
				this.y = currentGraph.y - (lineB - lineA) / 2;
			}
		} else if (this.type === 'text') {
			const fontSize = currentGraph.fontSize * ((lineB - lineA) / lineA + 1);
			this.fontSize = fontSize <= this.MIN_FONTSIZE ? this.MIN_FONTSIZE : fontSize;
		}
	},
	/**
	 * 画圆角矩形
	 */
	_drawRadiusRect(x, y, w, h, r) {
		const br = r / 2;
		this.ctx.beginPath();
		this.ctx.moveTo(this.toPx(x + br), this.toPx(y)); // 移动到左上角的点
		this.ctx.lineTo(this.toPx(x + w - br), this.toPx(y));
		this.ctx.arcTo(this.toPx(x + w), this.toPx(y), this.toPx(x + w), this.toPx(y + br), this.toPx(br));
		this.ctx.lineTo(this.toPx(x + w), this.toPx(y + h - br));
		this.ctx.arcTo(this.toPx(x + w), this.toPx(y + h), this.toPx(x + w - br), this.toPx(y + h), this.toPx(br));
		this.ctx.lineTo(this.toPx(x + br), this.toPx(y + h));
		this.ctx.arcTo(this.toPx(x), this.toPx(y + h), this.toPx(x), this.toPx(y + h - br), this.toPx(br));
		this.ctx.lineTo(this.toPx(x), this.toPx(y + br));
		this.ctx.arcTo(this.toPx(x), this.toPx(y), this.toPx(x + br), this.toPx(y), this.toPx(br));
	},
	toPx(rpx) {
		return rpx * this.factor;
	}
}

export default dragGraph
